doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0")
    meta(http-equiv="format-detection", content="telephone=no")
    title= card.name+' | 微名片'
    block styles
      link(rel='stylesheet', href='/stylesheets/o-responsive.css')
      link(rel='stylesheet', href='/stylesheets/templ1.css')
      link(rel='stylesheet', href="http://fonts.useso.com/css?family=Lato:300,400,900,300italic,400italic,900italic")
      link(rel='stylesheet', href='//cdn.staticfile.org/font-awesome/4.2.0/css/font-awesome.min.css')

  body.fullwidth.boxed
    block content
      #top
      //- #header
        .container.wrap.text-center
          span= card.name
          span= card.position
        span.clear
      #home.sugar-container
        .container.wrap
          .row
            .col.dimfull.text-center#animation
              #ccimage.img-circle
                - var avatar = card.avatar.source ? "/uploads/avatar/" + card.avatar.source : "http://lorempixel.com/140/140/city";
                img(src=avatar, style="width: 120px; height: 120px;")
              p#hello 你好, 我叫
              h1#ccname= card.name
              if card.position
                p#iam 我是
                h2#ccfunction= card.position

      #personalinfo.cream-container.parallax
        .icon-container
          div
            span.fa.fa-user.fa-lg
        .container.wrap
          .row
            .col.dimfull.text-center
              h2= card.company
              dl.row
                if card.email
                  dt.col.dim1half.text-right.padright 邮箱
                  dd.col.dim1half.text-left.padleft= card.email
                if card.mobile
                  dt.col.dim1half.text-right.padright 手机
                  dd.col.dim1half.text-left.padleft= card.mobile
                if card.phone
                  dt.col.dim1half.text-right.padright 电话
                  dd.col.dim1half.text-left.padleft= card.phone
                if card.site
                  dt.col.dim1half.text-right.padright 主页
                  dd.col.dim1half.text-left.padleft= card.site
                if card.address
                  dt.col.dim1half.text-right.padright 地址
                  dd.col.dim1half.text-left.padleft
                    strong= card.address

      #social.cream-container.parallex
        //- .icon-container
          div
            span.fa.fa-globe.fa-lg
        .container.wrap
          .row
            .col.dimfull.text-center
              h3
                span.fa.fa-globe
                |  网 络
              .more
                if card.qq
                  a.btn.transparent
                    span.fa.fa-qq.fa-2x
                    span  #{card.qq}
                if card.weixin
                  a.btn.transparent
                    span.fa.fa-weixin.fa-2x
                    |  #{card.weixin}
                if card.weibo
                  a.btn.transparent
                    span.fa.fa-weibo.fa-2x
                    |  #{card.weibo}

              //- p.intro= card.bio

      if card.bio
        #about.cream-container.parallex
          //- .icon-container
            div
              span.fa.fa-quote-left.fa-lg
          .container.wrap
            .row
              .col.dimfull.text-center
                h3
                  span.fa.fa-quote-left
                  |  关 于
                p.intro= card.bio
      if (card.address && card.location.length)
        - var point = card.location
        - var marker = {lng: point[0], lat: point[1]};
        - var marker_img = marker.lng+','+marker.lat;
        - var marker_link = marker.lat+','+marker.lng;
        - var labels = card.company || '我的位置';
        - var labelStyle = '&labels='+marker_img+'&labelStyles='+labels+',0,14,0xff0000,0xffffff,1';
        - var map_img_attrs = {'src': 'http://api.map.baidu.com/staticimage?&scale=2&center='+marker_img+'&markers='+marker_img+'&width=320&height=240&zoom=14&copyright=1&markerStyles=l,,red'};
        - var map_link_attrs = {'href': 'http://api.map.baidu.com/marker?location='+marker_link+'&title='+labels+'&content=地址&output=html&src=vc_client', 'target': '_blank'};
        #map.cream-container
          //- .icon-container
            div
              span.fa.fa-map-marker.fa-lg
          .container.wrap
            .row
              .col.dimfull.text-center
                h3
                  span.fa.fa-map-marker
                  |  地 图
                p
                  a.btn&attributes(map_link_attrs)
                    | #{card.address}
                #map
                  a&attributes(map_link_attrs)
                    img.img-responsive.img-rounded.center-block.map-img&attributes(map_img_attrs)

      #copyright
        .container.wrap
          .row
            .col.dimfull.text-center
              p &copy; 2014 HT Labs.

    block scripts
      script(type="text/javascript", src="//cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js")
